手把手教大家设计氛围弹窗，学不会来砍我

-2021年第22篇原创-

好想很多小伙伴都不太想做氛围感的UI，因为太麻烦。氛围感是一个比较抽象的概念，每个人对氛围感的感知和要求也不同，有时候你觉得自己做的很好看，但是领导觉得氛围感不强，或者太过于花里胡哨了，总是get不到领导的那个点。一个具有氛围感的活动界面或者元素经常会让你抓破头皮，一点设计思路都没有。那么我们今天就用一个实际案例给大家分享一下我是怎么做氛围弹窗的。

1.理解该弹窗的设计目标

在我们印象中的氛围弹窗可能是下面这样的

但是我注意到，类似“恐怖谷”效应也会发生在弹窗上，什么意思呢？就是越花里胡哨的弹窗，给人感知实际收益越低，大家可以品一品，就是你经常在使用app的时候，啪！弹出一个弹框，告诉100优惠券，结果拆成了10张，每张要满500才能用，这时候你的落差就很大，所以不是所有的弹窗都要做的很异形、很花里胡哨。所以这个时候我们的设计目标不是给用户很强的氛围感，而是让用户认知这个是一个实打实的好福利。

最近大家可能被pdd刷屏了，emmm，我也手贱的去尝试了一下看看是不是能直接提现100w现金，结果很残酷的告诉我，你得无限做循环任务，不停的下单，才“有机会”提现其中的百分之1的现金。套路啊！大家做电商的不要学它，千万不要贪小便宜，到时候买东西买了很多，提现永远提不出来！通过不停的浏览、下单、分享，每次完成一个任务可以累积几分钱。

不过我们也来看一下它的弹窗设计，在这个免单活动中它的弹窗有点什么小心思。

ppd的福利弹窗并没有像上面那些做的很异形，给人感觉可以够的到，做的很“官方”，殊不知这才是最大的坑，所以我们能从它的设计形式上获得一些灵感，如果想让用户真实感受到福利，那么就不要做的太花里胡哨。

这次我们也要设计的是一个免单奖励的弹窗，跟pdd不同的是我们这个免单是实打实的免单奖励。

2.分析原型

在这个原型中我们知道，最核心的信息肯定是免单奖励的文案和免单的金额，所以这两个内容是优先级第一的。

接下来，这个界面不仅仅是给当前的用户看而是希望用户能够去分享给其他人，所以该用户的个人头像和昵称在这里的优先级会被金额去向更重要一些，也是不可缺少的。

其次是免单后金额以什么形式返还，返还到哪里，需要让用户更清晰，这里打算将金额去向的说明和其他说明分开放，有时候用户不太会看说明，所以当他关闭弹窗后会有点不知所措，所以还打算在这里再加一个去账户查看的入口，但尽量弱化一些，核心的目标还是鼓励让用户去分享。

3.设计形式探索

根据设计目标，第一版做成了这个样子，有点太冷静了，毫无分享的欲望。

于是打算将氛围感营造的再热烈一些，但不至于到夸张的程度。通过对一些活动弹窗的进一步分析，打算利用一些小元素和设计手法将“免单”这个超欧的奖励告诉用户：

1.原有的弹窗缺少故事感，信息表达比较苍白，所以我想到的是利用卡片插入红包的手法（多说一点套路话更能显示b格）

2.利用丝带、金币元素来营造氛围，但是要记住，元素不能太过于零碎，并且需要有大小对比，这样营造氛围的元素也有层次感。

3.重新设计免单奖励的文字，让整体更有质感，并且将¥字符用元来替换，元会比¥能更让人感受到这是实打实的现金。

最后将所有信息都放上去来跟第一个版本做个对比吧。

总结一下，设计方案要根据不同的设计目标来制定，我们通常做设计的第一步会去找参考，但是如果脱离了最初的目标而去找参考，往往达不到我们想要的效果，并且适得其反。所以铁子们，UI设计其实并不简单，好的产品需要好的设计师来量身定做，总是一味的找参考，到最后可能会变成四不像，你们学废了吗？ 

/ End /

火热报名ing，已售一半名额

/ 近期热文推荐 /